<template>
    <!-- 添加 | 修改 | 查看弹窗 -->
    <el-dialog :title="`批量调价`" v-model="drawerVisible" width="900px" append-to-body center destroy-on-close draggable
        :close-on-click-modal='false'>
        <el-form ref="ruleFormRef" :model="drawerProps.rowData" :rules="rules" label-width="auto"
            :disabled="drawerProps.title == '查看'">
            <!-- <el-form-item label="类型id" prop="typeId">
                <el-input v-model="drawerProps.rowData!.typeId" placeholder="请输入类型id" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="orderNum">
                <el-input v-model="drawerProps.rowData!.orderNum" placeholder="请输入显示顺序" />
            </el-form-item>
            <el-form-item label="制度标题" prop="title">
                <el-input v-model="drawerProps.rowData!.title" placeholder="请输入制度标题" />
            </el-form-item>
            <el-form-item label="制度正文">
                <editor v-model="drawerProps.rowData!.content" :min-height="192" />
            </el-form-item>
            <el-form-item label="是否删除0否1是" prop="delFlag">
                <el-input v-model="drawerProps.rowData!.delFlag" placeholder="请输入是否删除0否1是" />
            </el-form-item> -->
            <el-button type="primary" :icon="CirclePlus" style="margin-bottom: 10px;"
                @click="drawerProps.rowData.priceReqList.push({})">
                新增
            </el-button>
            <el-table :data="drawerProps.rowData.priceReqList" style="width: 100%">
                <el-table-column label="所属系列">
                    <template #default="scope">
                        <el-form-item label="" :rules='rules.typeName'>
                            <!-- <MySelect v-model="scope.row.id" :request-api="listWithFather" :fieldNames="memberFiled"
                                :initParam="{ pageNum: 1, pageSize: 99999, fatherName: '产品系列' }" /> -->
                            <el-select v-model="scope.row.seriesName" placeholder="请选择一级系列" clearable>
                                <el-option label="臻品系列" value="臻品系列" />
                                <el-option label="悦美系列" value="悦美系列" />
                                <el-option label="特能系列" value="特能系列" />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="单价区间/元" width="330">
                    <template #default="scope">
                        <div class="price-range">
                            <el-form-item label="最低">
                                <el-input v-model="scope.row.unitPriceBefore" placeholder="最低价" maxlength="18"
                                    style="width: 100px" oninput="value=value.replace(/[^\d.]/g,'')">
                                </el-input>
                            </el-form-item>
                            <span class="separator">至</span>
                            <el-form-item label="最高">
                                <el-input v-model="scope.row.unitPriceAfter" placeholder="最高价" maxlength="18"
                                    style="width: 100px" oninput="value=value.replace(/[^\d.]/g,'')">
                                </el-input>
                            </el-form-item>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="成本价/元">
                    <template #default="scope">
                        <el-form-item label="" :rules='rules.typeName'>
                            <el-input v-model="scope.row.costPrice" placeholder="请输入成本价" maxlength="18"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="备注">
                    <template #default="scope">
                        <el-input v-model="scope.row.memo" placeholder="请输入备注" type="textarea"
                            :autosize="{ minRows: 3, maxRows: 8 }" maxlength="72"></el-input>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" width="60">
                    <template #default="scope">
                        <el-popconfirm title="确认删除?" @confirm="drawerProps.rowData.priceReqList.splice(scope.$index, 1)">
                            <template #reference>
                                <el-button link type="primary" size="small">
                                    删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="drawerVisible = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template >
<script setup lang="ts" >
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import {
    CirclePlus,
    Delete,
    EditPen,
    Download,
    Upload,
    View,
    Refresh
} from "@element-plus/icons-vue";
import {
    listWithFather
} from "@/api/zc/classification";
import { validateChineseEnglish } from "@/utils/validate";
const proxy = getCurrentInstance()?.proxy;

let memberFiled = { label: "childName", value: "id", labelName: "childName", autoLable: false };
//父组件传递参数类型
interface DiolgProps {
    title: string;
    isView: boolean;
    rowData: any;
    api?: (params: any) => Promise<any>;
    getTableList?: () => void;
    [proName: string]: any
}
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const drawerVisible = ref(false);
const drawerProps = ref<DiolgProps>({
    isView: false,
    title: "",
    rowData: {
        priceReqList: []
    },
});

// 接收父组件传过来的参数
const acceptParams = (params: DiolgProps) => {
    drawerProps.value = params;
    drawerVisible.value = true;
};

const handleSubmit = () => {
    ruleFormRef.value!.validate(async valid => {
        if (!valid) return;
        try {
            await drawerProps.value.api!({ ...drawerProps.value.rowData });
            ElMessage.success({ message: `${drawerProps.value.title}成功！` });
            drawerProps.value.getTableList!();
            drawerVisible.value = false;
        } catch (error) {
            console.log(error);
        }
    });
};

const rules = reactive(
    {
        typeName: [
            { required: true, message: '类型不能为空', trigger: 'blur' },
            {
                validator: (rule, value, callback) => validateChineseEnglish(rule, value, callback, "请输入，限制18位，支持中英文"),
                trigger: "change"
            }
        ],
        status: [
            { required: true, message: '0正常1停用不能为空', trigger: 'blur' }
        ],
        content: [
            { required: true, message: '制度正文不能为空', trigger: 'blur' }
        ],
        delFlag: [
            { required: true, message: '是否删除0否1是不能为空', trigger: 'blur' }
        ],
    }
);
defineExpose({
    acceptParams
});
</script>
<style lang="scss" scoped>
.price-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.separator {
    margin: 0 5px;
}
</style>
